<template>
  <div class="tableExhibition">
    <div class="top">
      <span class="goback" @click="goBack">
        <img src="./image/goback.png" alt="" />
        返回上一级
      </span>
      <span class="pseudo_name">{{ patientInfo.userName }}</span>
      <span class="pseudo_phone">{{ patientInfo.phone }}</span>
      <el-date-picker
        v-model="measuringTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button class="btn" @click="submit">查询</el-button>
    </div>
    <div class="bottom">
      <my-switch @isActive="getDisplayType"></my-switch>
      <ul class="statistics">
        <li
          class="statistics_item"
          v-for="item of overallTitle"
          :key="item.val"
        >
          <span class="item_label">{{ item.label }}</span>
          <span class="item_value">{{ totallist[item.val] }}</span>
        </li>
      </ul>
      <table-exhibition
        class="Table"
        v-if="selected"
        :header="header"
        :tableList="tableData"
      ></table-exhibition>
      <chart-exhibition v-else></chart-exhibition>
      <v-pagination
        v-if="selected"
        :total="total"
        @currentPage="currentPage"
      ></v-pagination>
    </div>
  </div>
</template>

<script>
// switch开关
import mySwitch from "./switch/switch";
// 表格展示
import tableExhibition from "../../components/Table/index";
// 图表展示
import chartExhibition from "./chartExhibition";
// 分页
import vPagination from "../../components/pagination/index";

export default {
  data() {
    return {
      measuringTime: [], //测量时间
      patientInfo: {
        userName: "测试文本",
        phone: "13121589635",
      },
      selected: true, //数据展示格式table--true chart--false
      statisticList: [
        {
          label: "总计",
          value: "1次",
        },
        {
          label: "正常次数",
          value: "1次",
        },
        {
          label: "偏高次数",
          value: "1次",
        },
        {
          label: "偏低次数",
          value: "1次",
        },
        {
          label: "最高血糖",
          value: "7.2mmol/L",
        },
        {
          label: "最低血糖",
          value: "6.8mmol/L",
        },
        {
          label: "平均血糖",
          value: "6.8mmol/L",
        },
      ],
      overallTitle: [
        { label: "总计:", val: "total" },
        { label: "正常次数:", val: "normal" },
        { label: "偏高次数:", val: "high" },
        { label: "偏低次数:", val: "low" },
        { label: "最高血糖:", val: "max" },
        { label: "最低血糖:", val: "min" },
      ],
      patientID: "",
      header: [
        {
          label: "检测时间",
          prop: "gluceExamtime",
        },
        {
          label: "空腹",
          prop: "gluceAttr0.bloodGluceValue",
        },
        {
          label: "早餐前",
          prop: "gluceAttr1.bloodGluceValue",
        },
        {
          label: "早餐后",
          prop: "gluceAttr2.bloodGluceValue",
        },
        {
          label: "午餐前",
          prop: "gluceAttr3.bloodGluceValue",
        },
        {
          label: "午餐后",
          prop: "gluceAttr4.bloodGluceValue",
        },
        {
          label: "晚餐前",
          prop: "gluceAttr5.bloodGluceValue",
        },
        {
          label: "晚餐后",
          prop: "gluceAttr6.bloodGluceValue",
        },
        {
          label: "睡前",
          prop: "gluceAttr7.bloodGluceValue",
        },
        {
          label: "凌晨",
          prop: "gluceAttr8.bloodGluceValue",
        },
        {
          label: "随机",
          prop: "gluceAttr9.bloodGluceValue",
        },
      ],
      tableData: [],
      totallist: [],
      total: 10,
      page: 1,
    };
  },
  mounted() {
    this.patientID = this.$route.query.id;
    this.getDataUserInfo();
    let data = {
      id: this.patientID,
      current: this.page,
      startTime: "",
      endTime: "",
    };
    this.getallbloodsugar(data);
  },
  components: {
    mySwitch,
    tableExhibition,
    chartExhibition,
    vPagination,
  },
  methods: {
    goBack() {
      this.$router.back(-1);
    },
    getDisplayType(val) {
      this.selected = val;
      let data = {
        id: this.patientID,
        current: 1,
        startTime: "",
        endTime: "",
      };
      this.getallbloodsugar(data);
    },
    // 模糊查询
    submit() {
      let data = {
        id: this.patientID,
        current: this.page,
        startTime: "",
        endTime: "",
      };
      if (this.measuringTime && this.measuringTime.length > 0) {
        data.startTime = this.measuringTime[0];
        data.endTime = this.measuringTime[1];
      }
      this.getallbloodsugar(data);
    },
    // 患者基本信息
    getDataUserInfo() {
      let data = {
        id: this.patientID,
      };
      this.$api.getDataUserInfo(data).then((res) => {
        this.patientInfo = res.data.data;
      });
    },
    // 获取当前患者的所有血糖数据
    getallbloodsugar(data) {
      this.$api
        .getallbloodsugar(data)
        .then((res) => {
          this.totallist = res.data.dataNum;
          let tableData = res.data.data;
          let list = [];
          tableData.forEach((item, index) => {
            list[index] = {};
            list[index].gluceExamtime = item.gluceExamtime;
            for (let i = 0; i < item.bloodSugarGluces.length; i++) {
              let gluceAttr = "gluceAttr" + item.bloodSugarGluces[i].gluceAttr;
              list[index][gluceAttr] = item.bloodSugarGluces[i];
            }
          });
          this.tableData = list;
          this.total = res.total;
        })
        .catch((err) => {
          this.tableData = [];
          this.total = 0;
        });
    },
    // 当前页数据
    currentPage(page) {
      this.page = page;
      this.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
.tableExhibition {
  padding: 0 20px;
  background-color: #fff;
  height: 100%;
  .top {
    height: 76px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    &::after {
      position: absolute;
      content: "";
      display: block;
      border-bottom: 1px solid #f6f6f6;
      bottom: 0;
      width: calc(100% + 40px);
      // padding: -20px;
      left: -20px;
    }
    .goback {
      display: flex;
      align-items: center;
      color: #01a7f0;
      margin-right: 76px;
    }
    .pseudo_name {
      &::before {
        content: "姓名:";
      }
    }
    .pseudo_phone {
      &::before {
        content: "手机号:";
      }
    }
    .pseudo_name,
    .pseudo_phone {
      margin-right: 76px;
      &::before {
        color: #999999;
      }
    }
    .btn {
      position: absolute;
      right: 0;
    }
  }
  @media screen and (max-width: 1129px) {
    .top {
      justify-content: space-between;
      flex-wrap: wrap;
      .goback,
      .pseudo_name,
      .pseudo_phone {
        margin: 0;
      }
      .btn {
        position: relative;
      }
    }
  }
  .bottom {
    margin-top: 27px;
    .statistics {
      // background-color: #01a7f0;
      margin: 0;
      padding: 30px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .statistics_item {
        list-style: none;
        margin-right: 60px;
        &:last-child {
          margin: 0;
        }
      }
      @media screen and (max-width: 1445px) {
        .statistics_item {
          width: 180px;
        }
      }
    }
  }
}
</style>